<template>
    <div style="display: flex;flex-direction: row">
        <my-card-title title="发布事件">
            <div style="height: 148px;border-bottom: 1px solid #EAEDF3;
            display: flex;flex-direction: column;
            justify-content: space-between">
                <div style="height: 62px;margin-top: 20px;padding: 0 30px;
                display: flex;flex-direction: row;">
                    <div style="overflow: hidden;border-radius: 50%;
                    background-color: rebeccapurple;width: 62px;height: 62px">
                    </div>
                    <div style="flex: 1;display: flex;flex-direction: column;
                    justify-content: space-between;margin-left: 24px">
                        <div style="font-size: 22px;line-height: 32px;
                        color: #3E3F42">
                            点击这里修改标题
                        </div>
                        <div style="font-size: 14px;line-height: 22px;
                        color: #9EA0A5">
                            在左侧添加显示图片
                        </div>
                    </div>
                </div>
                <span class="document-editor__toolbar"
                      style="padding: 0 30px;"></span>
            </div>
            <editor :editor="editor"
                    @ready="onReady"
                    :config="editorConfig"
                    v-model="editorData"
                    style="min-height: 500px">
            </editor>
        </my-card-title>
        <div>
            <custoom-btn @click="save">ok</custoom-btn>
        </div>
    </div>

</template>
<script>
    import decoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn';
    import CustoomBtn from '../../components/BtnCustom';
    export default {
        name: 'Editor',
        components: {
            'custoom-btn': CustoomBtn,
            'editor': CKEditor.component,
        },
        data () {
            return {
                editor: decoupledEditor,
                editorConfig: {
                    language: 'zh-cn',
                    placeholder: 'Type some text...',
                    ckfinder: {
                        uploadUrl: 'http://192.168.50.56:9090/uploadImage',
                    },
                },
                editorData: '',
            };
        },
        mounted () {

        },
        methods: {
            onReady (editor) {
                const toolbarContainer =
                    document.querySelector('.document-editor__toolbar');
                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
            },
            save () {
                const fromData = new FormData();
                fromData.append('eventTitle', '测试');
                fromData.append('eventType', 1);
                fromData.append('eventContent', this.editorData);
                fromData.append('eventCreateTime', dateToString(new Date()));
                fromData.append('eventDeadTime', dateToString(new Date()));
                fromData.append('eventPublisher', 1);
                fromData.append('eventAdmin', 1);
                fromData.append('eventCanRegisterNum', 10);
                fromData.append('status', 1);
                this.$apis.saveEvent(fromData).then(({data})=>{
                    console.log(data);
                });
            },
        },
    };

    const dateToString = function (date) {
        const y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        const h = date.getHours();
        let minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        let second= date.getSeconds();
        second = minute < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+ second;
    };
</script>

<style>
    .ck.ck-toolbar {
        background-color: white;
    }
</style>
